@extends('layout.default')

@section('layout.content')
<div class="space-32"></div>
  <div class="row">
    <div class="col-xs-12">
      <form class="form-horizontal" id="role-create" autocomplete="off">        
        <div class="form-group">
          <label class="col-sm-4 control-label no-padding-right" for="isparent"> <b><span class="red">*</span> 菜单类型：</b>
          </label>
          <div class="col-sm-4 checkbox">
            <label>
              <input name="isparent" type="checkbox" value="1" class="ace ace-checkbox-2 isparent" checked/>
              <span class="lbl"> 一级菜单</span>
            </label>
          </div>
        </div>
        <div class="form-group parentlist" style="display:none;">
          <label class="col-sm-4 control-label no-padding-right" for="parent"> <b><span class="red">*</span>父级菜单：</b></label>
          <div class="col-sm-4">
            <select name="parent" class="form-control parent">
              <option>请选择父级菜单</option>
              @foreach($parents as $key=>$parent)
                <option value="{{$parent->id}}" data-controller="{{$parent->controller}}">{{$parent->title}}</option>
              @endforeach
            </select>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-4 control-label no-padding-right" for="title"> <b><span class="red">*</span> 菜单名称：</b>
          </label>
          <div class="col-sm-4">
            <input type="text" class="form-control" id="title" name="title" placeholder="菜单名称"/>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-4 control-label no-padding-right" for="controller"> 
              控制器： </label>
          <div class="col-sm-4">
            <input type="text" class="form-control controller" id="controller" name="controller" placeholder="控制器"/>
          </div>
        </div>
        <div class="form-group action" style="display: none;">
          <label class="col-sm-4 control-label no-padding-right action-label" for="action"> 模块：</label>
          <div class="col-sm-4">
            <input type="text" class="form-control" id="action" name="action" placeholder="模块"/>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-4 control-label no-padding-right" for="name"> <b><span class="red">*</span> 导航参数：</b>
          </label>
          <div class="col-sm-4">
            <input type="text" value="" class="form-control" id="name" name="name"
                   placeholder="导航参数"/>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-4 control-label no-padding-right" for="icon"> 图标：</label>
          <div class="col-sm-3">
            <input type="text" class="form-control" id="icon" name="icon" placeholder="图标"/>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-4 control-label no-padding-right" for="order"> 排序：</label>
          <div class="col-sm-3">
            <input type="text" class="form-control" id="order" name="order" placeholder="排序"/>
          </div>
        </div>


        <div class="form-group">
          <label class="col-sm-4 control-label no-padding-right"> </label>
          <div class="col-sm-4">
            <button type="button" class="btn btn-primary submit">
              <i class="ace-icon fa fa-check"></i>
              <span class="">确定</span>
            </button>
          </div>
        </div>

      </form>
    </div>
  </div>

@stop

@section('javascript')
  <script type="text/javascript">
      $(function () {
          $(".isparent").on('click', function () {
              var that = $(this);
              if (that.is(":checked")) {
                  $(".parentlist").css("display", "none");
                  $(".action").css("display", "none");
                  $(".action-label").html("模块：");
              } else {
                  $(".parentlist").css("display", "block");
                  $(".action").css("display", "block");
                  $(".action-label").html('<b><span class="red">*</span> 模块：</b>');
              }
          });

          $(".parent").on('change', function () {
              var that = $(this);
              $(".controller").attr("value", that.find("option:selected").data('controller'));
          });

          $('.submit').on('click', function () {
              var uri = '{{route('system.permission.store')}}';

              $.post(uri, {
                  '_token': $("input[name='_token']").attr('value'),
                  'isparent': $("input[name='isparent']:checked").val(),
                  'parent': $("select[name='parent']").val(),
                  'name': $("input[name='name']").val(),
                  'title': $("input[name='title']").val(),
                  'controller': $("input[name='controller']").val(),
                  'action': $("input[name='action']").val(),
                  'icon': $("input[name='icon']").val(),
                  'order': $("input[name='order']").val(),
                  'is_submit': true
              }, function (data) {
                  layer.msg(data.message, {time:1000, shift: -1}, function () {
                      if (data.status === true && data.url != null) {
                          $(window).attr('location', data.url);
                      }
                  });

              }, 'json').error(function (data) {
                  layer.msg(data.responseJSON.message);
              });

          });


      });
  </script>
@stop